<template name="mineBox">
	<view>
		<view class="mineHeader">
			<!-- 个人信息 -->
			<view class="mineInfo" v-for="(item,index) in mineInfo" :key="index">
				<image :src="item.url" mode="scaleToFill"></image>
				<view>{{item.name}}<text class="iconfont" :class="item.sign"></text></view>
				<button class="gradeBtn" size="mini" :style="{'background':item.followBg}">{{item.followBtn}}</button>
			</view>
			<!-- 关注/粉丝/获赞/收藏/积分 -->
			<view class="mineInfoList">
				<navigator class="mineInfoBlock" v-for="(item,index) in mineInfoList" :key="index" :url="`/pages/mine/${item.url}`"
				 hover-class="none">
					<text>{{item.infoNumber}}</text>
					<label>{{item.infoTitle}}</label>
				</navigator>
			</view>
		</view>
		<view class="warp">
			<!-- 原创/提问/回答-->
			<view class="mineCensus">
				<navigator v-for="(item,index) in mineCensus" :key="index" hover-class="none" :url="`/pages/mine/${item.url}`" class="mineCensusBlock">
					<text>{{item.censusName}}</text>
					<view>{{item.censusNumber}}</view>
					<label>{{item.censusUit}}</label>
					<text class="iconfont" :class="item.bgIcon" :style="{'background': item.TypeColor}"></text>
				</navigator>
			</view>
			
			
		</view>
	</view>
</template>
<script>
	import titleBox from '@/components/headTitle/index.vue'
	export default {
		name: "mineBox",
		components: {
			titleBox,
		},
		props: {
			mineInfo: {
				url: {
					type: String,
					default: ''
				},
				name: {
					type: String,
					default: ''
				},
				sign: {
					type: String,
					default: ''
				},
				followBg: {
					type: String,
					default: ''
				},
				followBtn: {
					type: String,
					default: ''
				}
			},
			mineInfoList: {
				url: {
					type: String,
					default: ''
				},
				infoNumber: {
					type: String,
					default: ''
				},
				infoTitle: {
					type: String,
					default: ''
				}
			},
			mineCensus: {
				url:{
					type: String,
					default: ''
				},
				censusName: {
					type: String,
					default: ''
				},
				censusNumber: {
					type: String,
					default: ''
				},
				censusUit: {
					type: String,
					default: ''
				},
				bgIcon: {
					type: String,
					default: ''
				},
				TypeColor: {
					type: String,
					default: ''
				},
			},
			mineTaste: {
				colorPag: {
					type: String,
					default: ''
				},
				taste: {
					type: String,
					default: ''
				}
			},
			mineReward: {
				reward: {
					type: String,
					default: ''
				},
				rewardName: {
					type: String,
					default: ''
				}
			}
		},
		data() {
			return {}
		},
		methods: {

		}
	}
</script>
<style lang="scss">
	@import "../../icon/iconfont.css";
	page {
		letter-spacing: $uni-spacing-row-one;
		
		.mineHeader {
			background-color: #ff6166;
			background-image: linear-gradient(180deg, #ff6166 0%, #ff9a8b 100%);
			text-align: center;
			padding-top: $uni-spacing-row-sy;
			position: relative;
			color: $uni-bg-color;
			.mineInfo {
				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 100%;
					border: $uni-border-radius-sm solid $uni-bg-color;
					margin-bottom: $uni-spacing-row-sm;
				}
				text {
					color: $uni-color-yellow;
				}
				.gradeBtn {
					margin: 4% 0 0;
				}
			}
			&::after {
				position: absolute;
				content: '';
				background-image: url(https://s3.ax1x.com/2021/03/03/6AnrEF.png);
				background-size: 100%;
				background-position: left bottom;
				top: 0;
				width: 100%;
				height: 100%;
				left: 0;
				pointer-events: none
			}
			.mineInfoList {
				display: flex;
				justify-content: space-between;
				padding: $uni-spacing-col-lg 0;
				.mineInfoBlock {
					width: 20%;
					position: relative;
					font-size: $uni-font-size-base;
					text {
						display: block;
						padding-bottom: $uni-border-radius-lg;
					}
				}
			}
		}
		.mineCensus {
			display: flex;
			justify-content: space-between;
			margin: $uni-spacing-row-lg 0;
			.mineCensusBlock {
				border: 1rpx solid #f6f6f6;
				background-color: $uni-bg-color;
				width: 40%;
				border-radius: $uni-border-radius-lg;
				padding: 4%;
				position: relative;
				color: $uni-text-color-placeholder;
				font-size: $uni-font-size-base;
				view {
					color: $uni-color-error;
					padding: $uni-spacing-row-sm 0;
					font-size: $uni-font-size-lgx;
				}
				.iconfont {
					position: absolute;
					bottom: 0;
					right: 0;
					font-size: $uni-img-size-bases;
					color: $uni-bg-color;
					padding: 20px 10px 10px 20px;
					border-top-left-radius: $uni-img-size-lgs;
					border-bottom-right-radius: $uni-border-radius-lg;
				}
			}
		}
	}
</style>
